import tollgateJson from "../../../utils/tollgate.json";

var scatterYellow = null;
var triangleZMarker = null;
var zMarker = null;
let infoWindow = null;
export default class Tollgate {
  constructor(map, Loca, loca, AMap, router, getInfo, isFlag) {
    this.layerIcon = null;    
    this.labelsMarker=[];
    this.router = router;
    this.getInfo = getInfo;
    this.tollgatePoint=[];
    if (isFlag) {
      this.layerIcon ? this.hideIcon() : "";
    } else if (this.layerIcon) {
      this.layerIcon.show();
    } else {
      this.init(map, Loca, loca, AMap);
    }
  }

  init(map, Loca, loca, AMap) {
    this.tollgatePoint = [];
    tollgateJson.forEach((item) => {
      if (item.entrances) {
        let coordinates = item.entrances.split(",");
        coordinates.forEach((item) => (item = Number(item)));
        this.tollgatePoint.push({
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: coordinates,
          },
          properties: { ...item },
        });
        // this.addMarker(item,AMap,map);
      }
      //
    });

    var geoPoint = new Loca.GeoJSONSource({
      data: {
        type: "FeatureCollection",
        features:  this.tollgatePoint,
      },
      // data:testJson
    });

    this.getIconLocation(map, Loca, loca, geoPoint);
  }

  getPointName(map, Loca, loca, geoPoint) {
    // 文字主体图层
    var zMarker = new Loca.ZMarkerLayer({
      loca: loca,
      zIndex: 120,
      depth: false,
      visible: false,
    });
    zMarker.setSource(geoPoint);
    zMarker.setStyle({
      content: (i, feat) => {
        var props = feat.properties;
        var leftColor =
          props.price < 60000 ? "rgba(0, 28, 52, 0.6)" : "rgba(33,33,33,0.6)";
        var rightColor =
          props.price < 60000 ? "#038684" : "rgba(172, 137, 51, 0.3)";
        var borderColor =
          props.price < 60000 ? "#038684" : "rgba(172, 137, 51, 1)";
        return (
          '<div style="width: 620px; height: 228px; padding: 0 0;">' +
          '<p style="display: block; height:80px; line-height:80px;font-size:40px;background-image: linear-gradient(to right, ' +
          leftColor +
          "," +
          leftColor +
          "," +
          rightColor +
          ",rgba(0,0,0,0.4)); border:4px solid " +
          borderColor +
          '; color:#fff; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
          props["name"] +
          '</p><span style="width: 130px; height: 130px; margin: 0 auto; display: block; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/prism_' +
          (props["price"] < 60000 ? "blue" : "yellow") +
          '.png);"></span></div>'
        );
      },
      unit: "meter",
      rotation: 0,
      alwaysFront: true,
      size: [620 / 2, 222 / 2],
      altitude: 0,
    });

    var triangleZMarker = new Loca.ZMarkerLayer({
      loca: loca,
      zIndex: 119,
      depth: false,
      visible: false,
    });

    triangleZMarker.setSource(geoPoint);
    triangleZMarker.setStyle({
      content: (i, feat) => {
        return (
          '<div style="width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_' +
          (feat.properties.price < 60000 ? "blue" : "yellow") +
          '.png);"></div>'
        );
      },
      unit: "meter",
      rotation: 0,
      alwaysFront: true,
      size: [60, 60],
      altitude: 15,
    });
    triangleZMarker.addAnimate({
      key: "altitude",
      value: [0, 1],
      random: true,
      transform: 1000,
      delay: 2000,
      yoyo: true,
      repeat: 999999,
    });

    // 呼吸点 金色
    var scatterYellow = new Loca.ScatterLayer({
      loca,
      zIndex: 110,
      opacity: 1,
      visible: true,
      zooms: [2, 26],
      depth: false,
      visible: false,
    });

    scatterYellow.setSource(geoPoint);
    scatterYellow.setStyle({
      unit: "meter",
      size: function (i, feat) {
        return feat.properties.price > 60000 ? [90, 90] : [0, 0];
      },
      texture:
        "https://a.amap.com/Loca/static/loca-v2/demos/images/scan_yellow.png",
      altitude: 20,
      duration: 2000,
      animate: true,
    });

    // 启动帧
    loca.animate.start();

    // 监听zoomend事件
    // map.on("zoomend", () => {
    //   // 获取当前缩放级别

    //   const currentZoom = map.getZoom();
    //   console.log("缩放",currentZoom)
    //   if (currentZoom > 16) {
    //     this.layerIcon ? this.layerIcon.hide() : "";
    //     infoWindow?infoWindow.close() :''
    //     scatterYellow.show();
    //     triangleZMarker.show();
    //     zMarker.show();
    //   } else {
    //     this.layerIcon ? this.layerIcon.show() : "";

    //     scatterYellow.hide();
    //     triangleZMarker.hide();
    //     zMarker.hide();
    //   }
    // });
    map.on("dragend", () => {
      const center = map.getCenter(); // 获取新的中心点
      console.log("地图拖拽后的中心点：", center);
      // 你可以在这里根据新的中心点进行其他操作
    });

    map.on("mouseover", (e) => {
      console.log("点击跳转大屏", e);
      const feat = this.layerIcon.queryFeature(e.pixel.toArray());
      if (feat) {
        const content = `<div class="textcus">${feat.properties.name}</div>`;
        infoWindow = new AMap.InfoWindow({
          isCustom: true,
          content: content, //传入 dom 对象，或者 html 字符串
          offset: new AMap.Pixel(10, -10),
        });
        infoWindow.open(map, e.lnglat);
      }
    });

    map.on("click", (e) => {
      console.log("点击跳转大屏", e);
      const feat = this.layerIcon.queryFeature(e.pixel.toArray());
      if (feat) {
      }
    });
  }

  getIconLocation(map, Loca, loca, geoPoint) {
    this.layerIcon = new Loca.LabelsLayer({
      zIndex: 12,
      collision: false,
      opacity: 1,
      visible: true,
      zooms: [8, 15],
    });
    this.layerIcon.setSource(geoPoint);
    let url = new URL(`../../../assets/images/icon53.png`, import.meta.url)
      .href;
    this.layerIcon.setStyle({
      icon: {
        type: "image",
        image: url,
        size: [21, 26],
        anchor: "center",
      },
      extData: (index, feat) => {
        return feat.properties;
      },
    });

    loca.add(this.layerIcon);

    this.tollgatePoint.forEach((item) => {
 
      let labelMarkers=new AMap.LabelMarker({
        name: item.properties.namedesc,
        position: item.geometry.coordinates,
        zooms: [2, 22],
        opacity: 1,
        zIndex: 12,
        text: {
          content: item.properties.namedesc,
          direction: "bottom",
          offset: [0, -35],
          style: {
            fontSize: 12,
            fontWeight: "normal",
            fillColor: "rgba(255,255,255,.5)",
          },
        },
      });
      this.labelsMarker.push(labelMarkers)
      
    });
    map.add(this.labelsMarker);
    this.layerIcon.on("complete", () => {
      var normalMarker = new AMap.Marker({
        offset: [10, -10],
      });
      var labelMarkers = this.layerIcon.getLabelsLayer().getAllOverlays();
      for (let marker of labelMarkers) {
        marker.on("mouseover", (e) => {
          this.getInfo(marker.getExtData().deptId).then((res) => {
            var position = e.data.data && e.data.data.position;
            let str = "";
            if (
              res.data &&
              res.data.tbNearStationList &&
              res.data.tbNearStationList.length
            ) {
              res.data.tbNearStationList.forEach((item) => {
                str += `<div class='gatecus'> <span>${
                  item.stationName ? item.stationName : "暂无"
                }</span><span>${
                  item.distance ? item.distance + "km" : "0"
                }</span></div>`;
              });
            }
            if (position) {
              normalMarker.setContent(
                `<div class="textcus"> ${
                  marker.getExtData().name
                } <div class='namecus'>附近收费站</div> ${
                  str ? str : "暂无"
                } </div> `
              );
              normalMarker.setPosition(position);
              map.add(normalMarker);
            }
          });
        });
        marker.on("mouseout", () => {
          map.remove(normalMarker);
        });
        marker.on("click", () => {
          map.remove(normalMarker);
          this.router.push({
            path: "/stationScreen",
            query: {
              deptId: marker.getExtData().deptId,
              deptName: marker.getExtData().name,
              road: marker.getExtData().road,
            },
          });
        });
      }
    });

    // this.getPointName(map, Loca, loca, geoPoint, this.layerIcon);
  }

  hideIcon() {
    this.layerIcon.hide();
    this.labelsMarker.forEach(item=>{
      item.hide();
    })
    
   
    // scatterYellow.hide();
    // triangleZMarker.hide();
    // zMarker.hide();
  }

  showIcon() {
    this.layerIcon.show();
    this.labelsMarker.forEach(item=>{
      item.show();
    })
  }
}
